<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性研究</title>
    <link rel="stylesheet" href="/static/css/my-demo.css">
    <style>

        /*
        说明:
            1. 使用CSS中float，可以将元素向左或向右推，以允许其他元素环绕它。
                - float属性的值是 left，right，和 none。
                    1. left，right会使元素向左或者向右浮动。
                    2. none能确保元素不会进行浮动。
            2. float通常与图像一起使用，但在处理布局时也很有用。
            3.  元素是水平浮动的，这意味着元素只能左右浮动，不能上下浮动。
        */
        .float-img {
            float: right;
        }

        .my-p {
            width: 300px;
            height: 300px;
        }

        img {
            width: 100px;
            height: 100px;
        }

        .myImg {
            display: block;
        }

        .myRightFloatImg {
            /*
            说明:
                1. 设置了float属性的元素依旧参与盒模型布局;
            */
            float: right;
        }

        input {
            width: 600px;
        }

        .clear-both {
            clear: both;
        }

        .bg-blue-30x30 {
            width: 30px;
            height: 30px;
            background-color: blue;
        }

        .bg-red-30x30 {
            width: 30px;
            height: 30px;
            background-color: red;
        }

        .bg-yellow-30x30 {
            width: 30px;
            height: 30px;
            background-color: yellow;
            border: yellow solid 3px;
        }

        .float-left-div {
            float: left;
        }

        .float-span {
            border: blue 1px solid;
            float: left;
            width: 100px;
            height: 100px;
        }

        .my-article {
            width: 500px;
            padding: 20px;
            border: 1px solid black;
        }

        .my-article > div {
            height: 50px;
            width: 248px;
            float: left;
            background-color: #00B83F;
            margin: 1px;
        }

        .my-article-2 {
            width: 500px;
            padding: 20px;
            border: 1px solid black;
        }

        .my-article-2 > div {
            height: 50px;
            width: 248px;
            float: left;
            background-color: #00B83F;
            margin: 1px;
        }

        /*
        说明:
            1. 伪元素也可以直接看成就是一个元素, 具有html元素的所有属性, 但是不具体显示;
            ```
            伪元素最终会被浏览器翻译为::after, 而伪元素也可以设置css的清除浮动属性, 进而就可以达到和后面设置一个空的block元素同样的
            效果.
            ```
        */
        .my-article-2:after {
            display: block;
            content: '';
            clear: both;
        }

        .my-article-3 {
            width: 500px;
            padding: 20px;
            border: 1px solid black;
            /*
            说明:
                1. 给元素设置overflow属性之后, 这个元素在计算高度时就会统计其中的浮动元素;
                2. bfc机制的作用之一: 让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
            */
            overflow: auto;
        }

        .my-article-3 > div {
            height: 50px;
            width: 248px;
            float: left;
            background-color: #00B83F;
            margin: 1px;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 浮动</h1>
    <h2>1.1 浮动对之前的元素的影响</h2>
    <article>
        <div class="bg-red-30x30"></div>
        <div class="bg-blue-30x30 float-left-div"></div>
    </article>
    <h2>1.2 浮动对之后的元素的影响</h2>
    <article>
        <p>浮动的元素不再参与文档流布局, 但是在这个例子中覆盖了补充上来的元素</p>
        <div class="bg-red-30x30"></div>
        <div class="bg-yellow-30x30 float-left-div"></div>
        <div class="bg-blue-30x30"></div>
    </article>
    <h2>1.3 对浮动元素之后的元素设置clear属性</h2>
    <article>
        <p>如果一个正常元素之前的元素浮动了, 则默认该元素会覆盖掉那个浮动元素, 但是可以设置clear属性来清除浮动</p>
        <div class="bg-red-30x30"></div>
        <div class="bg-yellow-30x30 float-left-div"></div>
        <div class="bg-blue-30x30 clear-both"></div>
        <div class="bg-red-30x30"></div>
    </article>
    <h2>1.4 行级元素浮动之后变为inline-block</h2>
    <article style="border: black 2px solid; padding: 10px;">
        <p>span元素的默认display属性为inline, 所以默认不可以设置宽高</p>
        <span style="height: 100px;">asdasdas</span>
        <span>dsfdzxcs</span>
    </article>
    <article style="border: black 2px solid; padding: 10px;">
        <p>
            对比上面的span, 会发现, 浮动之后的span属性变为了inline-block, 但是其实从浏览器观察会发现其实是block, 但是却表现出
            inline-block的行为; 而且, 浮动元素的的高度不会影响父元素了, 但是这个浮动元素仍旧受到父元素的边界约束.
        </p>
        <span class="float-span">asdasdas</span>
        <span class="float-span">dsfdzxcs</span>
    </article>
</div>
<div>
    <h1>二. 浮动属性的其他操作</h1>
    <h2>2.1 使父容器可以自动检测浮动元素的高度</h2>
    <article class="my-article">
        <div></div>
        <div></div>
        <!--
        说明:
            1. 可以再浮动元素下方设置一个空的block元素, 虽然父容器无法感知浮动元素的高度, 但可以通过block元素来检测, 而清楚了float
            属性的元素不会覆盖之前的浮动元素, 而是把之前的浮动元素当做一个block元素, 进而达到了父容器自动根据浮动元素的高度来调整自己
            的高度.
        -->
        <article style="clear: both; border: 1px solid red;"></article>
    </article>
    <h3>2.1.1 使用伪元素达到2.1的效果</h3>
    <article class="my-article-2">
        <div></div>
        <div></div>
    </article>
    <h3>2.1.2 使用BFC机制达到2.1的效果</h3>
    <article class="my-article-3">
        <div></div>
        <div></div>
    </article>
</div>
<div>
    <style>

        #main-page {
            width: 1020px;
            border: 1px solid black;
            margin: 0 auto;
            /*使用BFC机制使父容器计算浮动元素的高度*/
            overflow: auto;
            padding: 10px;
        }

        #main-page article:not(:first-of-type) {
            margin-top: 10px;
        }

        #main-page article.hot {
            border: 2px solid red;
            overflow: hidden;
        }

        #main-page article.hot section:nth-of-type(1) {
            width: 500px;
            background-color: green;
            height: 300px;
            float: left;
        }

        #main-page article.hot section:nth-of-type(2) {
            width: 500px;
            background-color: yellow;
            height: 300px;
            float: right;
        }

        #main-page article.good {
            border: 2px solid red;
            overflow: hidden;
        }

        #main-page article.good section:nth-of-type(1) {
            width: 300px;
            background-color: green;
            height: 300px;
            float: left;
        }

        #main-page article.good section:nth-of-type(2) {
            width: 710px;
            background-color: yellowgreen;
            height: 300px;
            float: right;
        }

        .horizontal-ul {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        .horizontal-ul li {
            float: left;
            width: 200px;
            height: 258px;
            padding: 20px;
            background-color: #a6e1ec;
            border: 1px solid red;
        }

    </style>
    <main id="main-page">
        <article class="hot">
            <section></section>
            <section></section>
        </article>
        <article class="good">
            <section></section>
            <section>
                <ul class="horizontal-ul">
                    <li>123</li>
                    <li>456</li>
                    <li>789</li>
                </ul>
            </section>
        </article>
    </main>
</div>
<div>
    <style>
        /*
        说明:
            1. 默认情况下, 一些元素具有默认的外边距和内边距, 可以使用这种方式进行初始化.
        */
        main.my-page-2 * {
            padding: 0px;
            margin: 0px;
        }

        main.my-page-2 {
            background-color: #f3f3f3;
        }

        main.my-page-2 header {
            box-shadow: 0 5px 5px rgba(100, 100, 100, 0.3);
            border-bottom: solid 3px green;
            background-color: #fff;
        }

        main.my-page-2 header nav {
            padding: 30px 10px 50px 0px;
            width: 1200px;
            margin: 0 auto;
        }

        main.my-page-2 header nav ul {
            float: left;
            list-style: none;
        }

        main.my-page-2 header nav ul li {
            float: left;
        }

        main.my-page-2 header nav ul li:not(:first-of-type) {
            margin-left: 20px;
        }

        main.my-page-2 header nav div.button {
            float: right;
        }

        main.my-page-2 main {
            width: 1200px;
            margin: 20px auto;
            background-color: red;
            overflow: hidden;
        }

        main.my-page-2 main article:nth-of-type(1) {
            width: 900px;
            height: 300px;
            box-sizing: border-box;
            background-color: #025aa5;
            float: left;
        }

        main.my-page-2 main article:nth-of-type(2) {
            width: 280px;
            height: 300px;
            box-sizing: border-box;
            background-color: #b3b3b3;
            float: right;
        }

        main.my-page-2 footer {
            background-color: #fff;
            padding: 30px;
            margin: 0 auto;
            border-top: solid 3px green;
        }

        main.my-page-2 footer div {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

    </style>
    <main class="my-page-2">
        <!--头部-->
        <header>
            <nav>
                <ul>
                    <li>系统课程1</li>
                    <li>系统课程2</li>
                    <li>系统课程3</li>
                    <li>系统课程4</li>
                </ul>
                <div class="button">
                    <button>登录</button>
                </div>
            </nav>
        </header>
        <!--主体-->
        <main>
            <article></article>
            <article></article>
        </main>
        <!--底部-->
        <footer>
            <div>sadassadsadsadsadsadsd</div>
        </footer>
    </main>
</div>
<div>
    <style>

        .me-p {
            border: solid 1px black;
            padding: 30px;
            /*BFC机制*/
            overflow: hidden;
        }

        .me-p span {
            width: 10px;
            height: 10px;
            float: left;
            padding: 10px;
            border: 20px solid red;
            margin: 20px;
            /*
            说明:
                1. 从浏览器中改变这个属性的值来观察效果.
                    - border-box: 四周的文字将会显示到border中;
                    - padding-box: 四周的文字将会显示到padding中;
                    - 其他的请自行观察效果.
            */
            shape-outside: border-box;
        }

        .me-p2 {
            border: solid 1px black;
            padding: 30px;
            /*BFC机制*/
            overflow: hidden;
        }

        .me-p2 span {
            width: 10px;
            height: 10px;
            float: left;
            padding: 10px;
            /*border: 20px solid red;*/
            margin: 20px;
            /*
            说明:
                1. 将该图形以百分比转换为原型.
            */
            clip-path: circle(50%);
            background-color: red;
            /*
            说明:
                1. 从浏览器中改变这个属性的值来观察效果.
                    - border-box: 四周的文字将会显示到border中;
                    - padding-box: 四周的文字将会显示到padding中;
                    - 其他的请自行观察效果.
            */
            shape-outside: border-box;
        }

        .me-p3 {
            border: solid 1px black;
            padding: 30px;
            /*BFC机制*/
            overflow: hidden;
        }

        .me-p3 span {
            width: 100px;
            height: 100px;
            float: left;
            padding: 20px;
            /*border: 20px solid red;*/
            margin: 20px;
            /*
            说明:
                1. polygon方法用于绘制一个任意图形, 0 0 表示这个图形的左上角, 100% 100%表示这个图形的右下角, 最终会用这些点绘制出
                需要的图形.
                    - `shape-outside: polygon(0 0, 0 100%, 100% 100%);`这句代码可以使文字环绕画出的图形的边界, 呈不规则展示.
            */
            clip-path: polygon(0 0, 0 100%, 100% 100%);
            background-color: red;
            /*
            说明:
                1. 从浏览器中改变这个属性的值来观察效果.
                    - border-box: 四周的文字将会显示到border中;
                    - padding-box: 四周的文字将会显示到padding中;
                    - 其他的请自行观察效果.
            */
            shape-outside: polygon(0 0, 0 100%, 100% 100%);
        }

        .me-p3 {
            border: solid 1px black;
            padding: 30px;
            /*BFC机制*/
            overflow: hidden;
        }

        .me-p3 img {
            width: 30px;
            height: 30px;
            float: left;
            /*
            说明:
                1. 这里的意思就是以这个图片为边界.
                    - 注意: 使用图片为边界的话需要使用有透明度的.png图片, jpg不行.
            */
            shape-outside: url("/static/images/face/50.gif");
        }

    </style>
    <h1>三. 其他属性说明</h1>
    <h2>3.1 控制文字和浮动元素的显示方式</h2>
    <p class="me-p">
        <span></span>
        后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
    </p>
    <h2>3.2 控制浮动元素的显示方式</h2>
    <p class="me-p2">
        <span></span>
        后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
    </p>
    <h2>3.3 使文字环绕不规则自定义形状</h2>
    <p class="me-p3">
        <span></span>
        后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
    </p>
    <h2>3.4 使文字环绕图片的边界</h2>
    <p class="me-p3">
        <img src="/static/images/face/50.gif">
        后盾人不断更新优秀视频教程，感谢大家关注、分享、点赞、评论
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
        无论你是学习 javascript、mysql、php、css、es6、node.js、java、vue.js、react.js 、Linux、python、angular、es7、es8、typescript、less、sass 本视频都会给你带来帮助。
    </p>
</div>
</body>
</html>